<template>
  <!-- 顶栏容器 -->
  <el-header>
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      active-text-color="#409eff"
      router>
      <div class="logo">
        <router-link :to="menuList[0].path">
          <img src="../assets/imgs/logo.png" alt/>
        </router-link>
      </div>
      <template v-for="item in menuList" :key="item.id">
        <el-menu-item :index="item.path">{{item.name}}</el-menu-item>
      </template>
      <!--<el-menu-item index="/">首页</el-menu-item>-->
      <!--<el-menu-item index="/goods">全部商品</el-menu-item>-->
      <!--<el-menu-item index="/about">关于我们</el-menu-item>-->

      <div class="so">
        <el-input placeholder="请输入搜索内容" v-model="search">
          <el-button icon="el-icon-search" @click="searchClick"></el-button>
        </el-input>
      </div>
    </el-menu>
  </el-header>
  <!-- 顶栏容器END -->
</template>

<script>
  export default {
    name: "Header",
    props:{
      menuList: Object
    },
    data() {
      return {
        activeIndex:this.menuList[0].path
      }
    },
    methods: {
      searchClick() {

      }
    }
  };
</script>

<style scoped>
  /* 顶栏容器CSS */
  .el-header .el-menu {
    max-width: 1225px;
    margin: 0 auto;
  }

  .el-header .logo {
    height: 60px;
    width: 189px;
    float: left;
    margin-right: 100px;
  }

  .el-header .so {
    margin-top: 10px;
    width: 300px;
    float: right;
  }

  /* 顶栏容器CSS END */
</style>
